<template>
  <el-card style="width: 73%;">
    <div style="display: flex;flex-direction: column;width: 100%;justify-items: start">
      <el-space :size="20">
        <h2> {{ rankInfo.levelName }}</h2>
      </el-space>
      <br>
      <el-space :size="20">
        <el-text>Lv {{ userStore.userInfo.level }}</el-text>
        <el-text>排名 {{ userStore.userInfo.rank }}</el-text>
        <el-text>经验 {{ userStore.userInfo.totalExp }}</el-text>
      </el-space>
      <br>
      <el-progress :text-inside="true" :percentage="rankInfo.percentage"></el-progress>
      <br>
      <el-space :size="20">
        <el-text>还需 {{ rankInfo.upExp }} 经验升级</el-text>
      </el-space>
    </div>
  </el-card>


</template>
<script setup>
import {levelQuery} from "@/views/system/level/js/LevelRequest.js";
import {useUserStore} from "@/store/index.js";
import {onMounted, ref} from "vue";

onMounted(() => {
  reqLevel()
})
const userStore = useUserStore();

const rankInfo = ref({
  percentage: 0,
  levelName: 'Nan',
  upExp: 0,
})

const reqLevel = () => {
  levelQuery({level: userStore.userInfo.level}).then(res => {
    if (res.success && res.data !== null) {
      rankInfo.value.levelName = res.data.levelName;
      rankInfo.value.percentage = Number(userStore.userInfo.levelExp / res.data.upReqExp * 100)
      rankInfo.value.upExp = res.data.upReqExp - userStore.userInfo.levelExp
    }
  })
}


</script>

<style scoped>

</style>